<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/jsp/common/navigationRight.jsp" %>
<%@include file="/WEB-INF/jsp/common/head.jsp" %>
<%@include file="/WEB-INF/jsp/common/navigationLeft.jsp" %>

<div class="m2-userCentermanage-con">
    <div class="m2-user-recharge">
        <h3><i class="m2-user-record"></i>还款计划</h3>
    </div>
    <div class="m2-recharge-mainbody">
        <div class="m2-user-newsmanage">
            <form style="display: none" method="post" action="${pageContext.request.contextPath }/borrow/info">
                <input type="text" value="${ps.currentPageNo}" name="currentPageNo"/>
                <input type="text" value="${proId}" name="proId"/>
            </form>
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>${aqbBorrows[0].proName}</td>
                    <td>每期还款本金</td>
                    <td>每期还款利息</td>
                    <td>还款日期</td>
                    <td>未付本金</td>
                </tr>
                <c:forEach items="${aqbBorrows}" var="aqbBorrow" varStatus="status">
                    <tr>
                        <td>第${status.index + 1}期</td>
                        <td>${aqbBorrow.payMoney}元</td>
                        <td>${aqbBorrow.payInterest}元</td>
                        <td>${aqbBorrow.payDate}</td>
                        <td>${aqbBorrow.obligation}</td>
                    </tr>
                </c:forEach>
                <c:if test="${ps.currentPageNo == ps.totalPageCount}">
                    <tr>
                        <td>总计</td>
                        <td>${aqbBorrows[0].payMoneySum}元</td>
                        <td>${aqbBorrows[0].payInterestSum}元</td>
                        <td></td>
                        <td title="其中本金:<fmt:formatNumber pattern="0.00" type="number" value="${aqbBorrows[0].proAmount - aqbBorrows[0].payMoneySum}" maxFractionDigits="2"></fmt:formatNumber>元 | 利息:<fmt:formatNumber pattern="0.00" type="number" value="${aqbBorrows[0].payableInterest - aqbBorrows[0].payInterestSum}" maxFractionDigits="2"></fmt:formatNumber>元">
                            <fmt:formatNumber pattern="0.00" type="number" value="${(aqbBorrows[0].proAmount - aqbBorrows[0].payMoneySum) + (aqbBorrows[0].payableInterest - aqbBorrows[0].payInterestSum)}" maxFractionDigits="2"></fmt:formatNumber>元
                        </td>
                    </tr>
                </c:if>
            </table>
            <div class="page-bar">
                <ul class="page-num-ul clearfix">
                    <li>共${ps.totalCount }条记录&nbsp;&nbsp; ${ps.currentPageNo}/${ps.totalPageCount} 页</li>
                    <c:if test="${ps.currentPageNo > 1 }">
                        <a href="javascript:page_nav(document.forms[0],1);">首页</a>
                        <a href="javascript:page_nav(document.forms[0],${ps.currentPageNo - 1 });">上一页</a>
                    </c:if>
                    <c:if test="${ps.currentPageNo < ps.totalPageCount }">
                        <a href="javascript:page_nav(document.forms[0],${ps.currentPageNo + 1 });">下一页</a>
                        <a href="javascript:page_nav(document.forms[0],${ps.totalPageCount });">最后一页</a>
                    </c:if>
                    &nbsp;&nbsp;
                </ul>
                <span class="page-go-form"><label>跳转至</label>
                <input type="hidden" id="totalPageCount" value="${ps.totalPageCount}"/>
	            <input type="text" name="inputPage" id="inputPage" class="page-key"/>页
	            <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
		        </span>
            </div>
            <form method="post" action="${pageContext.request.contextPath }/borrow/pay" class="xsx-borrow">
                <input type="number" value="" class="xsx-borrowMoney" placeholder="本次还款金额" name="payMoney"/>
                <span>应还金额：${repayment}</span>
                <input type="hidden" value="${proId}" name="proId"/>
                <input type="button" class="xsx-button" value="还款"/>
            </form>
            <span style="position: relative;left: 50px;top: 20px;color: red">${Msg}</span>
        </div>
    </div>
</div>
</div>
<div class="xsx-heibei" style="display: none">
    <div class="xsx-tanchuang">
        <input type="password" value="" placeholder="请输入密码" />
        <button class="xsx-qr">确认</button>
        <button class="xsx-qx">取消</button>
        <span class="xsx-msg"></span>
    </div>
</div>
<style>
    .xsx-heibei{
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(0,0,0,0.3);
        z-index: 999;
        left: 0;
        top: 0;
    }
    .xsx-tanchuang{
        background-color: white;
        width: 400px;
        height: 100px;
        position: absolute;
        left: 35%;
        top: 45%;
        border-radius: 10px;
    }
    .xsx-tanchuang>input{
        position: absolute;
        left: 10%;
        top: 35%;
        width: 200px;
        height: 30px;
    }
    .xsx-qr{
        position: absolute;
        left: 65%;
        top: 38%;
        height: 25px;
    }
    .xsx-qx{
        position: absolute;
        left: 80%;
        top: 38%;
        height: 25px;
    }
    .xsx-msg{
        position: absolute;
        left: 10%;
        top: 75%;
        color: red;
    }
    .xsx-borrow{
        position: relative;
        left: -80px;
        top: 10px;
    }
    .xsx-borrow span{
        margin: 0px 10px;
        color: orangered;
    }
    .xsx-borrowMoney{
        height: 20px;
    }
    .xsx-button,.xsx-qr,.xsx-qx{
        width: 50px;
        background-color: #2a6496;
        color: white;
        border-radius: 10px;
    }
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/aqbjs/borrow/rollpage.js"></script>
<script type="text/javascript">
    $(function () {
        // 点击还款出现输入密码
        $(".xsx-button").click(function () {
            $(".xsx-heibei").show();
        });
        //确认按钮提交表单
        $(".xsx-qr").click(function () {
            var form = $(".xsx-borrow");
            var pwd = $(".xsx-heibei input").val();
            var span = $(".xsx-heibei").find("span");
            $.ajax({
                url:"/borrow/isTrue",
                dateType:"json",
                data:{"pwd":pwd},
                success:function (data) {
                    if(data.isPass == "pass"){
                        form.submit();
                    }else{
                        span.html(data.Msg);
                    }
                },
                error:function (e) {
                    console(e);
                }
            });
        });
        // 点击取消隐藏密码框
        $(".xsx-qx").click(function () {
            $(".xsx-heibei input").val("");
            $(".xsx-heibei").css("display","none");
        });
    });
</script>
</body>
</html>